/**
 * 营销活动
 */
var React = require('react-native');
var {View, Text, StyleSheet} = React;

/**
 * Usage
 * var {QMMktActivity} = require('qmkit');
 *
 * <QMMktActivity data={[1,2,3]}/>
 */
var MktActivity = React.createClass({
  getDefaultProps() {
    return {
      data: []
    }
  },


  render() {
    return (
      <View style={[styles.labelGroup, this.props.labelGroup]}>
        {this._renderContent()}
      </View>
    );
  },


  /**
   * 渲染影响活动的类型
   */
  _renderActivity(type, index) {
    if (type == 1) {
      return (
        <View key={index} style={[styles.label,styles.labelError]}>
          <Text style={styles.text}>满赠</Text>
        </View>
      );
    } else if (type === 2) {
      return (
        <View key={index} style={[styles.label,styles.labelInfo]}>
          <Text style={styles.text}>满折</Text>
        </View>
      );
    } else if (type === 3) {
      return (
        <View key={index} style={[styles.label,styles.labelWarning]}>
          <Text style={styles.text}>满减</Text>
        </View>
      );
    }
  },


  _renderContent() {
    if (this.props.data.length === 0) {
      return null;
    }

    return this.props.data.map((v, k) => {
      return this._renderActivity(v, k);
    });
  }
});


var styles = StyleSheet.create({
  labelGroup: {
    flexDirection: 'row',
    marginTop: 5,
    height: 18
  },
  label: {
    paddingLeft: 8,
    paddingRight: 8,
    height: 18,
    marginRight: 5,
    borderRadius: 2,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  labelError: {
    backgroundColor: '#fb7574'
  },
  labelInfo: {
    backgroundColor: '#3fb7ea'
  },
  labelWarning: {
    backgroundColor: '#ffc617'
  },
  text: {
    fontSize: 12,
    color: '#fff'
  }
});


module.exports = MktActivity;
